<template>
  <div class="flex-row">
    <div class="mapopView">
      <div class="mapopContain">
        <div class="mapopFlex">
          <div class="mapopTitle mapText">编号</div>
          <div class="mapopTitle flex4">医院名称</div>
          <div class="mapopTitle flex2">医院规模（人）</div>
          <div class="mapopTitle flex2">医院建筑面积</div>
        </div>
        <div>
          <div
            class="mapopRow"
            :class="pointvalue == index ? 'bgselect' : ''"
            v-for="(item, index) in featuresArray"
            :key="index"
            @click="itemAction(item)"
          >
            <div
              class="mapopCircle"
              :class="pointvalue == index ? 'bgred' : 'bgblue'"
            >
              {{ index + 1 }}
            </div>
            <div class="mapopText flex4">{{ "科学建筑医学院" }}</div>
            <div class="mapopText flex2">{{ 100 * (12 - index) }}</div>
            <div class="mapopText flex2" style="color: #1fad60">
              {{ 100 * (24 - index) }}㎡
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="redhot-amap" style="height: 96vh; width: 72%"></div>
  </div>
</template>
<script>
// import { ElScrollbar } from "element-plus";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  components: {
    // ElScrollbar
  },
  data() {
    return {
      baseMap: null,
      pointvalue: 0,
      featuresArray: [],
    };
  },
  mounted() {
    for (let i = 0; i < 12; i++) {
      this.featuresArray.push({
        latitude: 28.6 + Math.random() / 10,
        longitude: 115.9 + Math.random() / 10,
      });
    }
    AMapLoader.load({
      key: "85d3a80bda77eaccc82f45777e0b0be6", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        "AMap.Geocoder",
        "AMap.Marker",
        "AMap.PlaceSearch",
        "AMap.HeatMap",
      ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      Loca: {
        //是否加载 Loca,缺省不加载
        version: "2.0.0", //Loca 版本,缺省1.3.2
      },
    })
      .then((AMap) => {
        let arr = [115.919, 28.659];
        //此处经纬度需反转(项目格式之前是反的)
        this.baseMap = new AMap.Map("redhot-amap", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 12, // 初始化地图级别
          zooms: [12, 20],
          resizeEnable: true,
          center: arr, // 初始化地图中心点位置
        });
        console.log("baseMap==>>", this.baseMap);
        this.featuresArray.forEach((item) => {
          // 创建一个 Marker 实例：
          const marker = new AMap.Marker({
            position: new AMap.LngLat(item.longitude, item.latitude), // 经纬度对象，也可                                        以是经纬度构成的一维数组[lng, lat]
          });
          // 将创建的点标记添加到已有的地图实例：
          this.baseMap.add(marker);
          this.baseMap.setFitView();
          //给标记点添加事件
          marker.on("click", (e) => {
            this.setInfoWindows(e, item);
          });
        });
      })
      .catch((e) => {
        console.log(e);
      });
  },
  methods: {
    itemAction(item) {
      console.log("itemAction==>>", item);
      this.baseMap.setCenter([item.longitude, item.latitude]);
    },
    //显示的弹出框组件
    setInfoWindows(e, item) {
      console.log(item);
      // 信息窗体的内容
      // let content = [
      //   // e.pos[0],e.pos[1],
      //   "<div style='padding:0px'><b>南昌医院</b>",
      //   "电话 : 123123123",
      //   "邮箱 : 123123123@126.com",
      //   "地址 : 测试地址</div>",
      //   // `<img src=${item.img} alt="" style="width: 100px;height: 100px">`
      // ];
      // 创建 infoWindow 实例
      // let infoWindow = new AMap.InfoWindow({
      //   content: content.join("<br>"), //传入 dom 对象，或者 html 字符串
      // });
      // // 打开信息窗体
      // let dd = this.baseMap.getCenter();
      // // dd.pos = [e.pos[0], e.pos[1]]
      // dd.lat = item.latitude;
      // dd.lng = item.longitude;
      // console.log(dd);
      // infoWindow.open(this.baseMap, dd);
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  user-select: none;
  list-style: none;
  box-sizing: border-box;
}

.flex-row {
  display: flex;
  width: 100%;
  height: 96vh;
}

.mapopView {
  width: 28%;
  display: flex;
  height: 96vh;
  flex-direction: column;
  top: 0;
  background: white;
}

.mapopContain {
  width: 92%;
  margin-left: 4%;
  margin-right: 4%;
  padding: 4%;
  border-radius: 8px;
  border: 1px solid #d8e2ee;
  box-shadow: 0px 4px 10px 0px #eaecf2;
  display: flex;
  flex-direction: column;
}

.mapopFlex {
  display: flex;
  height: 6vh;
  align-items: center;
  background: #f8f9ff;
}

.mapopRow {
  display: flex;
  height: 6vh;
  cursor: pointer;
  align-items: center;
}

.mapopRow:hover {
  transition: all 0.3s linear;
  transform: translateY(-4px);
}

.mapopRow:nth-child(2n) {
  background-color: #f8f9fa;
}

.mapopLayer {
  width: 2vw;
  height: 2vw;
  display: flex;
  align-items: center;
  flex-direction: column-reverse;
}

.mapopLay0 {
  width: 2vw;
  height: 0;
  border-width: 0 0.2vw 0.5vw 0.2vw;
  border-style: solid;
  border-color: #0000ff40 transparent;
}

.mapopLay1 {
  width: 1.72vw;
  height: 0;
  border-width: 0 0.2vw 0.5vw 0.2vw;
  border-style: solid;
  border-color: #0000ff transparent;
}

.mapopLay2 {
  width: 1.5vw;
  height: 0;
  border-width: 0 0.2vw 0.5vw 0.2vw;
  border-style: solid;
  border-color: #00ff00 transparent;
}

.mapopLay3 {
  width: 1.2vw;
  height: 0;
  border-width: 0 0.2vw 0.5vw 0.2vw;
  border-style: solid;
  border-color: #ffea00 transparent;
}

.mapopLay4 {
  width: 0;
  height: 0;
  border-width: 0.5vw;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

.mapopTitle {
  display: flex;
  line-height: 14px;
  font-size: 12px;
}

.mapopText {
  display: flex;
  font-size: 12px;
}

.mapText {
  margin-left: 1vw;
  margin-right: 1vw;
}

.mapopCircle {
  display: flex;
  align-items: center;
  align-content: center;
  width: 2vh;
  height: 2vh;
  margin-left: 1vw;
  margin-right: 1vw;
  justify-content: center;
  border-radius: 1vh;
  color: white;
  font-size: 12px;
}

.bgblue {
  background: #4282f7;
}

.bgred {
  background: #e35241;
}

.bgselect {
  background: #e6eeff !important;
}

.bgnormal {
  background: #e35241;
}

.flex1 {
  flex: 1;
  margin-left: 6px;
  width: 100%;
}

.margin-left2 {
  margin-left: 2px;
}

.textCenter {
  text-align: center;
}

.flex2 {
  flex: 2;
  width: 100%;
}

.flex3 {
  flex: 3;
  width: 100%;
}

.flex4 {
  flex: 4;
  width: 100%;
}

/deep/.amap-info-window {
  width: 280px;
  height: 120px;
  display: flex;
  background: #fff;
  align-items: center;
  border-radius: 3px;
  padding: 4px;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: relative;
}
/deep/.infoLeft {
  display: flex;
  flex: 1;
  padding: 4px;
  height: 80px;
  justify-content: center;
  flex-direction: column;
}
/deep/.infoRight {
  display: flex;
  padding: 4px;
  height: 80px;
  justify-content: space-around;
  flex: 2;
  font-size: 12px;
  flex-direction: column;
}
</style>
